<template>
	<view class="album">
		<ul class="cube big-cube" :class="active ? 'active' : ''">
			<li v-for="img of bigImgs" :key="img"><image :src="img" /></li>
		</ul>
		<ul class="cube little-cube">
			<li v-for="img of littleImgs" :key="img"><image :src="img" /></li>
		</ul>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bigImgs: [
				'/static/images/index/07.jpg',
				'/static/images/index/08.jpg',
				'/static/images/index/09.jpg',
				'/static/images/index/10.jpg',
				'/static/images/index/11.jpg',
				'/static/images/index/12.jpg'
			],
			littleImgs: [
				'/static/images/index/01.jpg',
				'/static/images/index/02.jpg',
				'/static/images/index/03.jpg',
				'/static/images/index/04.jpg',
				'/static/images/index/05.jpg',
				'/static/images/index/06.jpg'
			]
		};
	},
	props: {
		active: {
			type: Boolean,
			default: false
		}
	}
};
</script>

<style lang="scss" scoped>
.album {
	// 我们距离多远观察这个元素，设置一个较大值保证看清全部
	perspective: 1500px;
	position: relative;
	cursor: pointer;

	// 对角旋转
	@keyframes box-rotate {
		0% {
			transform: rotateX(0) rotateY(0deg);
		}
		100% {
			transform: rotateX(360deg) rotateY(360deg);
		}
	}

	ul,
	li {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.cube {
		transform-style: preserve-3d;
		animation: box-rotate 9s infinite linear;
		cursor: pointer;
		position: absolute;

		li {
			transition: all 0.2s ease-in-out;
			position: absolute;
			opacity: 0.8;
			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&.big-cube {
			width: 200px;
			height: 200px;
			z-index: 1;
			li {
				width: 200px;
				height: 200px;

				&:nth-child(1) {
					transform: rotateY(0) translateZ(100px);
				}

				&:nth-child(2) {
					transform: rotateY(180deg) translateZ(100px);
				}
				&:nth-child(3) {
					transform: rotateY(-90deg) translateZ(100px);
				}
				&:nth-child(4) {
					transform: rotateY(90deg) translateZ(100px);
				}
				&:nth-child(5) {
					transform: rotateX(90deg) translateZ(100px);
				}
				&:nth-child(6) {
					transform: rotateX(-90deg) translateZ(100px);
				}
			}

			&.active li {
				&:nth-child(1) {
					transform: rotateY(0) translateZ(250px);
				}

				&:nth-child(2) {
					transform: rotateY(180deg) translateZ(250px);
				}
				&:nth-child(3) {
					transform: rotateY(-90deg) translateZ(250px);
				}
				&:nth-child(4) {
					transform: rotateY(90deg) translateZ(250px);
				}
				&:nth-child(5) {
					transform: rotateX(90deg) translateZ(250px);
				}
				&:nth-child(6) {
					transform: rotateX(-90deg) translateZ(250px);
				}
			}
		}

		&.little-cube {
			width: 120px;
			height: 120px;
			top: 40px;
			left: 40px;

			li {
				width: 120px;
				height: 120px;

				// 前面
				&:nth-child(1) {
					transform: translateZ(60px);
				}

				// 后面
				&:nth-child(2) {
					transform: rotateY(180deg) translateZ(60px);
				}

				// 左面
				&:nth-child(3) {
					transform: rotateY(-90deg) translateZ(60px);
				}

				//右面
				&:nth-child(4) {
					transform: rotateY(90deg) translateZ(60px);
				}

				&:nth-child(5) {
					transform: rotateX(90deg) translateZ(60px);
				}

				&:nth-child(6) {
					transform: rotateX(-90deg) translateZ(60px);
				}
			}
		}
	}
}
</style>
